<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input 
        class="search-input" 
        placeholder="输入产品关键词" 
        v-model="keyword"
        @confirm="doSearch"
      />
      <image 
        class="search-icon" 
        src="/static/search.png" 
        mode="aspectFit" 
        @click="doSearch"
      />
    </view>

    <!-- 筛选栏 -->
    <scroll-view class="filter-scroll" scroll-x>
      <text 
        v-for="(item, index) in filters" 
        :key="index"
        :class="['filter-item', activeFilter === index ? 'active' : '']"
        @click="toggleFilter(index)"
      >
        {{ item.label }}
      </text>
    </scroll-view>

    <!-- 排序栏 -->
    <view class="sort-bar">
      <text 
        v-for="(item, index) in sortOptions" 
        :key="index"
        :class="['sort-item', sortType === item.value ? 'active' : '']"
        @click="changeSort(item.value)"
      >
        {{ item.label }}
      </text>
    </view>

    <!-- 产品瀑布流 -->
    <view class="product-list">
      <view 
        v-for="(item, index) in searchResults" 
        :key="index"
        class="product-card"
      >
        <image class="product-img" :src="item.image" mode="aspectFill" />
        <view class="product-info">
          <text class="product-name">{{ item.name }}</text>
          <text class="product-price">¥{{ item.price }}</text>
        </view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-text">
      <text v-if="loading">加载中...</text>
      <text v-else-if="noMore">没有更多了</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      activeFilter: 0,
      sortType: 1,
      currentPage: 1,
      loading: false,
      noMore: false,
      filters: [
        { label: '全部', value: 0 },
        { label: '智能设备', value: 1 },
        { label: '工业软件', value: 2 },
        { label: '解决方案', value: 3 }
      ],
      sortOptions: [
        { label: '综合排序', value: 1 },
        { label: '价格升序', value: 2 },
        { label: '价格降序', value: 3 }
      ],
      searchResults: []
    }
  },
  onLoad() {
    this.loadData()
  },
  onReachBottom() {
    if (!this.noMore) {
      this.currentPage++
      this.loadData()
    }
  },
  methods: {
    doSearch() {
      this.currentPage = 1
      this.noMore = false
      this.searchResults = []
      this.loadData()
    },
    toggleFilter(index) {
      this.activeFilter = index
      this.doSearch()
    },
    changeSort(value) {
      this.sortType = value
      this.doSearch()
    },
    async loadData() {
      this.loading = true
      // 模拟接口请求
      setTimeout(() => {
        const mockData = Array.from({ length: 10 }, (_, i) => ({
          id: i + this.currentPage * 10,
          name: `${this.keyword || '产品'} ${i + 1}`,
          price: (Math.random() * 1000).toFixed(2),
          image: `/static/product/${(i % 6) + 1}.jpg`
        }))
        
        this.searchResults = [...this.searchResults, ...mockData]
        this.loading = false
        this.noMore = this.currentPage >= 3
      }, 800)
    }
  }
}
</script>

<style>
.container {
  background: #fff;
  min-height: 100vh;
  padding: 15px;
}

.search-bar {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 8px 15px;
  margin-bottom: 15px;
}
.search-input {
  flex: 1;
  font-size: 14px;
}
.search-icon {
  width: 24px;
  height: 24px;
}

.filter-scroll {
  white-space: nowrap;
  margin-bottom: 15px;
}
.filter-item {
  display: inline-block;
  padding: 6px 15px;
  margin-right: 10px;
  background: #f5f5f5;
  border-radius: 15px;
  font-size: 13px;
}
.filter-item.active {
  background: #1a73e8;
  color: white;
}

.sort-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}
.sort-item {
  margin-left: 15px;
  font-size: 13px;
  color: #666;
}
.sort-item.active {
  color: #1a73e8;
  font-weight: 500;
}

.product-list {
  column-count: 2;
  column-gap: 10px;
}
.product-card {
  break-inside: avoid;
  margin-bottom: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: hidden;
}
.product-img {
  width: 100%;
  height: 180px;
}
.product-info {
  padding: 10px;
}
.product-name {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.product-price {
  display: block;
  color: #e1251b;
  font-size: 16px;
  margin-top: 8px;
}

.loading-text {
  text-align: center;
  padding: 15px;
  color: #999;
  font-size: 13px;
}
</style>